<template>
  <div class="app-container">
    <div class="coupon-add">
      <div class="coupon-search">
        <el-form :inline="true" :model="queryParams">
          <el-form-item label="任务名称" prop="taskName">
            <el-input v-model="queryParams.taskName" placeholder="任务名称" />
          </el-form-item>
          <el-form-item label="创建日期" prop="date">
            <el-date-picker v-model="queryParams.date" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getTableData">筛选</el-button>
            <el-button @click="resetSearchForm">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="coupon-button"><el-button type="primary" @click="showCouponSendForm">创建发放任务</el-button></div>
    </div>
    <el-table :data="tableData" v-loading="tableLoading">
      <el-table-column label="序号" type="index" :index="indexMethod" />
      <el-table-column prop="id" label="任务ID" />
      <el-table-column prop="taskName" label="任务名称" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button type="text" size="small" @click="openCoupon(scope.row)">{{ scope.row.status === '0' ?
            '禁用' : '启用' }}</el-button> -->
          <el-button type="text" size="small" @click="viewCoupon(scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="copyItem(scope.row,false)">复制</el-button>
        </template>
      </el-table-column>
    </el-table>
    <InBody v-show="total>0">
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getTableData"
      />
    </InBody>
    <sendForm ref="sendModal" sendType="MANUAL" :getTableData="getTableData" />
  </div>
</template>

<script>
import { queryCouponSend,querySendTaskDetail } from '@/api/coupon';
import sendForm from './sendForm.vue';
import moment from "moment";

export default {
  components: {
    sendForm
  },
  mounted() {
    this.getTableData();
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskName: '',
        date: []
      }
    }
  },
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    resetSearchForm() {
      Object.assign(this.queryParams, this.$options.data().queryParams)
      this.getTableData();
    },
    async getTableData() {
      this.tableLoading = true
      const params = {
        ...this.queryParams,
        createStartTime: this.queryParams.date.length > 0 ? moment(this.queryParams.date[0]).format('YYYY-MM-DD') : undefined,
        createEndTime: this.queryParams.date.length > 0 ? moment(this.queryParams.date[1]).format('YYYY-MM-DD') : undefined,
        taskType: 'MANUAL'
      }
      delete params.date;
      const { code, rows, total } = await queryCouponSend(params)
      this.tableLoading = false;
      if (code !== 200) return;
      this.total = +total;
      this.tableData = rows || []
    },
    showCouponSendForm() {
      this.$refs.sendModal.showModal('form')
    },
    copyItem(item, isEdit) {
      querySendTaskDetail({ id: item.id }).then(res => {
        if (res.code === 200) {
          const detail = res.data;
          detail.batchIdList=detail.batchIdList[0]
          detail.date = [detail.claimStart, detail.claimEnd];
          detail.dates = [detail.validFrom, detail.validTo];
          detail.uidIdList = detail.uidIdList.join('\n');
          console.log(isEdit)
          if (!isEdit) {
            delete detail.id;
            delete detail.status;
          }
          this.$refs.sendModal.changeFormValue(detail)
          this.showCouponSendForm();
        }
      })
    },
    viewCoupon(item){
      querySendTaskDetail({id:item.id}).then(res =>{
        if(res.code===200){
          const detail=res.data;
          this.$refs.sendModal.changeDetail(detail)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.coupon-add {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 85% 15%;
  margin-bottom: 15px;

  div {
    &.coupon-search {}

    &.coupon-button {
      text-align: right;
    }
  }
}
</style>
